<template>
  <div class="tab-bar">
    <div 
      class="tab-item" 
      :class="{ active: activeTab === 'appStore' }"
      @click="switchTab('appStore')"
    >
      <a-icon type="appstore" />
      <span>应用市场</span>
    </div>
    <div 
      class="tab-item" 
      :class="{ active: activeTab === 'chat' }"
      @click="switchTab('chat')"
    >
      <a-icon type="message" />
      <span>对话聊天</span>
    </div>
    <!-- 其他菜单项 -->
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'TabBar',
  computed: {
    ...mapState('tabBar', ['activeTab'])
  },
  methods: {
    async switchTab(tab) {
      // 更新状态
      await this.$store.commit('tabBar/SET_ACTIVE_TAB', tab);
      
      // 修改这里的路径映射
      const routePath = tab === 'appStore' ? '/app-store' : '/chat';
      if (this.$route.path !== routePath) {
        this.$router.push(routePath);
      }
    }
  },
  watch: {
    '$route': {
      immediate: true,
      handler(to) {
        // 修改这里的路径映射
        const pathToTab = {
          '/app-store': 'appStore',
          '/chat': 'chat'
        };
        const tab = pathToTab[to.path];
        if (tab && tab !== this.activeTab) {
          this.$store.commit('tabBar/SET_ACTIVE_TAB', tab);
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.tab-bar {
  .tab-item {
    &.active {
      color: #1890ff;
      
      .anticon {
        color: #1890ff;
      }
    }
  }
}
</style> 